<template>
  <div class="p-15 p-t-0">
    <div class="table-padding orderDialog text-left">
      <el-form :model="modelForm" ref="modelForm">
        <div>
          新增调价单
        </div>
        <div style="padding:10px;">
          <div class="stepName">
            第一步：调价策略
          </div>
          <el-row class="text-left el-row item1"
                  style="">
            <el-col :span="8">
              <el-form-item prop="transferOutId"
                            :rules="[{ required: true, message: '请选择调出仓库', trigger: 'blur',type:'number'}]">
                <div class="el-input el-input-group el-input-group--prepend el-input--medium">
                  <div class="el-input-group__prepend">调价策略</div>
                  <el-select v-model.number="modelForm.transferOutId" placeholder="请选择"
                             class="w-100p"
                             :disabled="isEdit"
                             @change="beforeChange">
                    <el-option
                      v-for="item in warehouseList"
                      :key="item.id"
                      :label="item.name"
                      :disabled="item.state && item.state.key!='NORMAL'"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="stepName">
            第二步：调价门店选择
          </div>
          <el-row class="text-left el-row item1"
                  style="">
            <el-col :span="8">
              <el-form-item prop="transferOutId"
                            :rules="[{ required: true, message: '请选择调出仓库', trigger: 'blur',type:'number'}]">
                <div class="el-input el-input-group el-input-group--prepend el-input--medium">
                  <div class="el-input-group__prepend">调价门店</div>
                  <el-select v-model.number="modelForm.transferOutId" placeholder="请选择门店"
                             class="w-100p"
                             :disabled="isEdit"
                             @change="beforeChange">
                    <el-option
                      v-for="item in warehouseList"
                      :key="item.id"
                      :label="item.name"
                      :disabled="item.state && item.state.key!='NORMAL'"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="stepName">
            第三步：调价原料选择
          </div>
          <el-row class="text-left  item1">

            <el-col :span="4">
              <el-input v-model="input" size="medium" @keyup.enter.native="keyDown($event)" placeholder="请输入单号"
                        style="margin-bottom: 10px;"
                        class="w-100p"
                        :maxlength="20">
                <template slot="append">
                  <el-button>搜索</el-button>
                </template>
              </el-input>
              <div class="me_title">原料分类</div>
              <el-tree :data="treeData" :props="defaultProps" style="height:200px;overflow-y:auto"
                       :expand-on-click-node="true" :default-expand-all="true" :highlight-current="true"></el-tree>
            </el-col>
            <el-col :span="1">&nbsp;</el-col>
            <el-col :span="18" style="margin-left:20px;">
              <div style="float: left;margin-bottom:10px;">已选分类</div>
              <div style="float: right;margin-bottom:10px;">删除</div>
              <el-table
                ref="multipleTable"
                :data="tableData3"
                style="width: 100%;"
                @selection-change="handleSelectionChange">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  label="订货门店"
                  width="120">
                  <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="原材料类别"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="原材料名称"
                >
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="库存单价(元)"
                >
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="门店订货价格(元)"
                >
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <div class="stepName">
            第四步：调价方式选择
          </div>
          <el-row class="text-left  item1">
            <el-col :span="6">
              <el-form-item prop="transferOutId"
                            :rules="[{ required: true, message: '请选择调出仓库', trigger: 'blur',type:'number'}]">
                <div class="el-input el-input-group el-input-group--prepend el-input--medium">
                  <div class="el-input-group__prepend">调价方式</div>
                  <el-select v-model.number="modelForm.transferOutId" placeholder="请选择"
                             class="w-100p"
                             :disabled="isEdit"
                             @change="beforeChange">
                    <el-option
                      v-for="item in warehouseList"
                      :key="item.id"
                      :label="item.name"
                      :disabled="item.state && item.state.key!='NORMAL'"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="transferOutId"
                            :rules="[{ required: true, message: '请输入调价系数', trigger: 'blur',type:'number'}]">
                <el-input type="text" v-model="modelForm.remark"  size="medium" :disabled="isEdit" auto-complete="off" placeholder="请输入">
                  <template slot="prepend">
                    <el-button>调价系数</el-button>
                  </template>
                  <template slot="append">
                  <el-button>%</el-button>
                </template>

                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item prop="transferOutId">
                <el-checkbox v-model="checked">结果值是否向上取整</el-checkbox>

              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-button class="btn-info" icon="" size="medium" @click="">确定</el-button>
            </el-col>
          </el-row>
          <div class="stepName">
            第四步：调价结果展示
          </div>
          <el-row class="text-left  item1" style="min-height: 20vh">
            <el-table
              :data="tableData3"
              style="width: 100%;"
             >
              <el-table-column
                label="订货门店"
                width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="原材料类别"
                width="120">
              </el-table-column>
              <el-table-column
                prop="address"
                label="原材料名称"
              >
              </el-table-column>
              <el-table-column
                prop="address"
                label="库存单价(元)"
              >
              </el-table-column>
              <el-table-column
                prop="address"
                label="门店订货价格(元)"
              >
              </el-table-column>
            </el-table>
          </el-row>
        </div>
        <el-form-item class="text-left text-left1" style="margin-bottom: 10px !important;">
          <el-button type="primary" size="medium" @click="submitForm('modelForm')"><i class="icon icon-baocun"></i> 保存</el-button>
          <el-button type="success"  size="medium" @click="resetForm('modelForm')"><i class="icon icon-tijiao"></i> 提交并审核</el-button>
          <el-button type="warning"  size="medium" v-if="modelForm.id"><i class="icon icon-dayin"></i> 打印</el-button>
          <el-button  type="danger"  size="medium" @click="goBack()"><i class="icon icon-fanhui1"></i> 取消</el-button>
        </el-form-item>
        <el-form-item class="text-left text-left5" style="margin-bottom: 10px !important;">
          <el-button type="warning"  size="medium"><i class="icon icon-dayin"></i> 打印</el-button>
          <el-button  type="danger"  size="medium" @click="goBack()"><i class="icon icon-fanhui1"></i> 取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  //注意路径
  export default {
    data() {
      return {
        defaultProps: {
          children: 'children',
          label: function (data) {
            return "[" + data.no + "]" + data.name;
          }
        },
        dialogTableVisible: false,
        isEdit: false,
        type: 1,
        checked:false,
        tableData: [],

        modelForm: {
          createAt: ""
        },
        pageSizeSet: window.pageSizes,
        pageSize: window.pageSize,
        pageTotal: 10,
        material: [],
        supplier: "",
        content: "",
        warehouse: "",
        timeout: null,
        gridData: [],
        itemActive: 0,
        data: [],
        selectRow: [],
        inputText: "",
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        tableData3: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
    },
    created() {
      window.this = this;
      window.isload = true;
      this.getData();
    },
    mounted() {
      if (this.$route.query.type != null && this.$route.query.type != "") {
        if (this.$route.query.type == "5") {//5 说明是查看
          $("input").attr("disabled", true);
          $(".text-left1").css("display", "none");
          $(".text-left5").css("display", "block");
          this.isEdit = true;
        }
      }
    },
    methods: {
      goBack(){
        this.router.go(-1);
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      newLabel(newList) {
        if (newList) {
          for (var i = 0; i < newList.length; i++) {
            newList[i].label = "[" + newList[i].no + "]" + newList[i].name;
            if (newList[i].children) {
              this.newLabel(newList[i].children)
            }
          }
        }
      },
      getData() {
        this.loading = true;
        this.$axios.get("materials/materials?page.pn=" + this.currentPage + "&page.size=" + this.pageSize + "&search.name_like=" + this.inputValue).then((data) => {
          this.loading = false
          this.tableData = data.content.materials.content;
          var tree = data.content.treeData;
          this.newLabel(tree);
          this.treeData = tree;
          for (var i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].category.name != null) {
              this.tableData[i].category = this.tableData[i].category.name
            }
          }
          this.total = data.content.materials.totalElements
        }).catch(function (err) {
        })
      },

    }

  }
</script>
<style scoped>
  .me_title {
    padding: 10px;
    background-color: #eef1f6;
    border: 1px solid #dfe6ec;
    border-bottom: 0;
    text-align: left;
  }

  .item1 {
    padding: 10px 20px;
    padding-top:15px;
    margin: 20px 0px;
    color: #8a6d3b;
    border: 1px solid #ccc;
  }

  .stepName {
    color: #888;
    padding-top: 10px;
  }

  .el-form-item {
    margin-bottom: 10px !important;
  }

  .el-table tr {
    border-bottom: 1px solid #dfe6ec !important;
  }

  .text-left5 {
    display: none;
  }

  /*单据打印*/
  :root {
    --zoomsize: 60%;
    --line-height-set: 30px;
  }

  .print-con {
    zoom: 60%;
    width: 98%;
    color: #333333;
    font-size: 12px !important;
    background-color: #ffffff;
    padding: 0 10px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -10;
  }

  /*单据-标题*/
  .print-con .order-title {
    zoom: var(--zoomsize);
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    border-bottom: 2px solid #333333;
  }

  /*单据-说明信息*/
  .print-con .order-info {
    padding: 0;
    font-size: 10px !important;
    height: auto;
    overflow: hidden;
  }

  .print-con .order-info ul {
    height: auto;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

  .print-con .order-info ul li {
    list-style: none;
    font-size: 12px;
  }

  .print-con .order-info ul li {
    zoom: var(--zoomsize);
    float: left;
    width: 33%;
    height: var(--line-height-set);
    line-height: var(--line-height-set);
    overflow: hidden;
  }

  .print-con .order-info ul li.sigle-line {
    zoom: var(--zoomsize);
    width: 100%;
    display: block;
  }

  /*单据-商品列表*/
  .print-con .tb-con {
    widht: 100%;
    background-color: #b4b4b4;
    border: 1px solid #b4b4b4;
  }

  .print-con .tb-con th {
    zoom: var(--zoomsize);
    height: var(--line-height-set);
    line-height: var(--line-height-set);
    background-color: #ffffff;
    border: 1px solid #b4b4b4;
    font-size: 12px;
  }

  .print-con .tb-con td {
    zoom: var(--zoomsize);
    height: var(--line-height-set);
    line-height: var(--line-height-set);
    text-align: center;
    background-color: #ffffff; /*border: 1px solid #b4b4b4;*/
    font-size: 12px;
  }

  /*责任条款*/
  .print-con .item-info {
  }

  .print-con .item-info ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .print-con .item-info ul li {
    zoom: var(--zoomsize);
    height: var(--line-height-set);
    line-height: var(--line-height-set);
    font-size: 12px;
  }

</style>
